<template>
  <div>
    <div class="row-header">
      <el-form :model="form" ref="form" label-width="50px" inline >
        <el-form-item label=" " prop="oldCardNumber">
          <el-input size="small" placeholder="请输入业务号码" v-model.trim="form.cardNumber" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="newCardNumber">
          <el-input size="small" placeholder="请输入iccid" v-model.trim="form.iccid" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="dictChangeStatus">
          <el-select v-model="form.dictBeforeStatus" placeholder="请选择拆机前状态卡状态" style="width: 300px" size="small">
            <el-option v-for="dictChannelCardStatus in dictChannelCardStatusSelect"
                       :key="dictChannelCardStatus.value" :label="dictChannelCardStatus.label"
                       :value="dictChannelCardStatus.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="small" @click="currentPage = 0 ; removeCard()" icon="el-icon-search">查询</el-button>
        <el-button type="shenda" size="small" @click="exlDownload" :loading="loading" icon="el-icon-download">导出</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-table v-has="'cardListOemListTable'" :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData"
                ref="table" tooltip-effect="dark" class="row-main-table" @selection-change="handleSelectionChange"
                @sort-change="changeSort" v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
                :row-key="getRowKeys">
        <el-table-column type="selection" :reserve-selection="true" align="center"></el-table-column>
        <el-table-column sortable="custom" prop="cardNumber" label="业务号码" align="center"></el-table-column>
        <el-table-column sortable="custom" prop="iccid" label="ICCID" align="center"></el-table-column>
        <el-table-column sortable="custom" prop="insertTimeDate" label="操作时间" align="center"></el-table-column>
        <el-table-column prop="dictBeforeStatusName" label="拆机前状态" align="center"></el-table-column>
        <el-table-column prop="reason" label="拆机原因" align="center"></el-table-column>
        <el-table-column prop="empName" label="操作人姓名" align="center"></el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="currentPage" :page-size="pageSize" class="row-main-pager"
                     layout="total, sizes, prev, pager, next, jumper" :page-count="maxPage" :total="totalPage"
                     :page-sizes="[10,20,50,100]" background></el-pagination>
      </div>
    </div>
  </div>

</template>

<script>
  import {
    removeCardList
  } from '@/api/getData'

  export default {
    name: 'List',
    data() {
      return {
        maxPage: 1,
        totalPage: 0,
        ruleForm: {
          courierNumber: '',
          shippingAddress: '',
          customerMobile: '',
          reason: '',
        },
        form: {
          iccid: '',
          cardNumber: '',
          dictBeforeStatus: '',
        },
        courierNumber1: '',
        id: '',
        terminatedDialog: false,
        terminatedDialog1: false,
        tableLoading: false,
        textarea: '',
        tableData: [],
        tableData1: [],
        pageSize: 10,
        currentPage: 1,
        ascs: [],
        descs: [],
        dictChannelCardTypeSearch: '',
        showSendGoods: false,
        changeCardDialog: false,
        showNumDetail: false,
        showBatchStopCard: "确认批量设置停机吗？",
        tableChecked: [],
        showStopCard: false,
        showStopCard1: false,
        ids: [],
        dictChannelCardStatusSelect: [
          {
            value: '',
            label: '请选择拆机前状态卡状态'
          },
          {
            value: 'ACTIVATE',
            label: '已激活'
          },
          {
            value: 'DEACTIVATE',
            label: '去激活'
          },
          {
            value: 'PAUSE',
            label: '停机'
          },
          {
            value: 'TERMINATED',
            label: '拆机'
          },
          {
            value: 'REACTIVATE',
            label: '重新激活'
          },
          {
            value: 'UP_ERROR',
            label: '未知错误'
          }
        ],
        loading: false,
      }
    },
    computed: {},
    created() {
      this.removeCard()
    },
    mounted() {

    },
    methods: {
      getRowKeys(row) {
        return row.id
      },

      handleSelectionChange(val) {
        this.tableChecked = val
        const length = this.tableChecked.length
        //console.log(`共 ${length} 条`)
      },
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.removeCard()
      },
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`)
        this.currentPage = val
        this.removeCard()
      },
      changeSort(column) {
        //console.log(column);
        if (column.order == 'ascending') {
          this.descs = []
          this.ascs = [column.prop];
        } else {
          this.ascs = []
          this.descs = [column.prop];
        }
        this.removeCard();
      },

      //拆机列表
      async removeCard() {
        this.tableLoading = true;
        const returnData = await removeCardList({
            iccid: this.form.iccid,
            cardNumber: this.form.cardNumber,
            dictBeforeStatus: this.form.dictBeforeStatus,
            page: {
              current: this.currentPage + '',
              size: this.pageSize + '',
              ascs: this.ascs,
              descs: this.descs
            }
          },
          {
            obj: this,
            key: 'tableLoading'
          })
        this.tableData = []
        if (returnData._result) {
          this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
          this.totalPage = returnData.data.total;
          // 数据回显
          returnData.data.records.map(item => {
            const obj = {}
            obj.id = item.id
            obj.insertTime = item.insertTime // 操作时间
            obj.insertTimeDate = item.insertTimeDate // 换卡类型
            obj.cardId = item.cardId // 换卡状态
            obj.iccid = item.iccid // 换卡类型
            obj.cardNumber = item.cardNumber // 换卡状态
            obj.dictBeforeStatus = item.dictBeforeStatus
            obj.dictBeforeStatusName = item.dictBeforeStatusName
            obj.reason = item.reason
            obj.empId = item.empId
            obj.empName = item.empName
            this.tableData.push(obj)
          })

        }
        this.tableLoading = false
      },
      exlDownload(){
        this.loading = true;
        this.tableLoading = true;
        let obj = {
          iccid: this.form.iccid,
          cardNumber: this.form.cardNumber,
          dictBeforeStatus: this.form.dictBeforeStatus,
          page: {
            current: this.currentPage + '',
            size: this.totalPage + '',
            ascs: this.ascs,
            descs: this.descs
          }
        };
        let arr = this.$refs.table.columns;
        arr.shift();
        let list = [];
        let filterVal = [];
        for (let item of arr) {
          list.push(item.label);
          filterVal.push(item.property);
        }
        let info = {
          api: 'removeCardList',
          name: '拆机卡列表'
        };
        this.tableLoading = false;
        this.loading = false;
        const { href } = this.$router.resolve({
          path: '/exl/exlDownload',
          query: {
            list: JSON.stringify(list),
            filterVal: JSON.stringify(filterVal),
            obj: JSON.stringify(obj),
            info: JSON.stringify(info),
          }
        });
        window.open(href, '_blank');
      }
    },

  }
</script>

<style scoped lang="scss">

  .el-popper[x-placement^=bottom] {
    margin-right: -31px;
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }

  .el-popper[x-placement^=top] {
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;
    margin-right: -31px;

    button {
      display: block;
    }

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
</style>
